<template>
  <div style="height: 73vh">
     <el-dialog title="附件管理" :close-on-click-modal="false" :visible.sync="visible" width="90vw" top="8vh">
    <el-container style="height: 100%;">
      <el-main>
        <el-table :data="fileDataList"  :row-class-name="addClass" height="70vh">
          <el-table-column type="index" width="100px" label="序号" :index="indexMethod">
          </el-table-column>
          <el-table-column label="文件名称" prop="fileName">
          </el-table-column>
          <el-table-column align="right">
               <!-- v-if="jjfpdjb.fujianstate=='false'" -->
            <template slot="header" slot-scope="scope">
              <el-upload class="upload-demo" accept=".pdf,.doc,.docx,.PDF, .xls, .xlsx, .txt" :headers="headers"
                         :show-file-list="false" action="/admin/sys-file/upload" :on-success="handleUploadSuccess"
                         :before-upload="beforeFileUpload " :on-change="handleChange" :on-preview="handlePictureCardPreview">
                <el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
              </el-upload>
            </template>
            <template slot-scope="scope">
              <!-- <el-button @click="handlePictureCardPreview(scope.row.filePath)" type="primary" plain>预览</el-button>
              <el-switch
                v-model="scope.row.disableflag"
                active-text="显示"
                active-value="1"
              inactive-value="0"
                style="margin-right:10px;"
                @change="changeDisableflag(scope.row.disableflag,scope.row.fileRename)"
                inactive-text="隐藏">
              </el-switch> -->
              <!-- v-if="jjfpdjb.fujianstate=='false'" -->
              <el-button   @click="download111(scope.row)" type="primary">下载</el-button>
              <el-button   @click="deleteHanler(scope.$index)" type="danger" plain>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
     </el-dialog>
    <el-dialog title="附件预览" :visible.sync="bgdialogVisible" width="90vw" top="3vh" append-to-body>
      <iframe :src="bgUrl" style="width: 100%;height:75vh"></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bgdialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getObj,
  putObj,
  setFileAdresstoJiangjin,
  setDisabletoFileAdress
} from '@/api/jiangjin/jiangjinfpjjfpdjb'
import {
    fjjl,
    huoqu
} from '@/api/jiangjin/jiangjinryllb'
import {
  getPreview
} from "@/util/util";
import store from '@/store'
import {
  getJiangJinBm
} from '@/api/admin/dept'

import {
  handleDown
} from "@/util/util";
import { getStore, setStore } from "@/util/store";
export default {
  components: {},
  data() {
    return {
       visible: false,
      bgdialogVisible: false,
      fileDataList: [],
      bgUrl: '',
      //主表记录
      jjfpdjb: {},
      dataListLoading: false,
      jjfpId: '', //奖金分配ID
      deptId: '', //负责部门ID
      deptName: '', //负责部门名称
      headers: {
        'TENANT-ID': getStore({ name: "tenantId" })
              ? getStore({ name: "tenantId" })
              : "1",
        Authorization: 'Bearer ' + store.getters.access_token
      },
    }
  },
  created() {
  },
  methods: {
    changeDisableflag(flag,name){
      var params={
        disableflag:flag,
        fileRename:name,
        id:this.jjfpId
      }
      setDisabletoFileAdress(params).then(res=>{
        if(res.data.code==0){
          this.refDataList();
        }
          
      })
    },
    addClass({row, rowIndex}){
      
      if(row.disableflag == 0){
          return 'cell-grey';
      }
    },
    indexMethod(index) {
      return index + 1;
    },
    download111: function (row, index) {
      handleDown(row.fileRename, row.bucketName);
    },
    /**
     * 查询
     */
    init(jjfpId) {
      this.fileDataList = [];
      this.jjfpId = jjfpId;
      this.visible = true;
      fjjl(jjfpId).then(response => {
        this.jjfpdjb = response.data.data;
      
        this.deptId = response.data.data.jjDeptId;
        this.deptName = response.data.data.jjDeptName;

        if (this.jjfpdjb.fileAddress) {
          this.fileDataList = JSON.parse(this.jjfpdjb.fileAddress);
        
         
        } else {
          this.fileDataList = [];
        }
      })
    },
    /**
     * 刷新数据
     */
    refDataList() {
      fjjl(this.jjfpId).then(response => {
        this.jjfpdjb = response.data.data;
        if (this.jjfpdjb.fileAddress) {
          this.fileDataList = JSON.parse(this.jjfpdjb.fileAddress);
        
        }
      })
    },
    /**
     * 文件预览预留
     */
    handlePictureCardPreview(url) {
      if (url) {
        this.bgUrl = getPreview(url) + "&officePreviewType=pdf";
        this.bgdialogVisible = true;
      } else {
        this.$notify.closeAll();
        this.$notify.error('还未上传附件');
      }
    },

    /**
     * 文件修改
     */
    handleChange(file, fileList) {
      this.fileList = [];
      this.fileList.push(file);
    },
    /**
     * 文件上传前
     */
    beforeFileUpload(file) {
      const isType = file.type === 'application/pdf' ||
        file.type === 'application/msword' ||
        file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
        file.type === 'text/plain' ||
        file.type === 'application/vnd.ms-excel' ||
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isType) {
        this.$notify.closeAll();
        this.$notify.error('上传文件格式不对!')
        return false;
      }
      return isType;
    },
    /**
     * 文件上传成功
     */
    handleUploadSuccess(response, file, fileList) {

      if (response.code == 0) {
        var obj = {};
        obj.fileName = file.name;
        obj.fileRename = file.response.data.fileName;
        obj.filePath = file.response.data.url;
        obj.bucketName = file.response.data.bucketName;
        // obj.bucketName =
        this.fileDataList.push(obj);
        var str = JSON.stringify(this.fileDataList);
        
        this.jjfpdjb.fileAddress = str;
        huoqu(this.jjfpdjb).then(res => {
          
          this.refDataList();
          this.$notify.closeAll();
          this.$notify.success('上传成功')
        //   this.$nextTick(()=>{
        //   var params={
        //   fileRename:file.response.data.fileName,
        //   id:this.jjfpId
        // }
        
        //   setFileAdresstoJiangjin(params).then(res=>{
        //     if(res.data.code==0){
        //       this.refDataList();
        //     }
        //   })
        //   this.$notify.closeAll();
        //   this.$notify.success('上传成功')
        // })

        })
        
        
      } else {
        this.$notify.closeAll();
        this.$notify.error('上传出错：' + response.msg)
      }
    },
    download: function (row, index) {
      handleDown(row.fileName, row.bucketName);
    },
    /**
     * 文件删除
     */
    deleteHanler(index) {
      this.fileDataList.splice(index, 1);
      var str = JSON.stringify(this.fileDataList);
      this.jjfpdjb.fileAddress = str;
      huoqu(this.jjfpdjb).then(res => {
        this.refDataList();
        this.$notify.closeAll();
        this.$notify.success('删除成功');
      })
    }

  }
}

</script>


<style>

.el-table .cell-grey td{
  background: #d7d7d7;
}

.el-table tbody tr:hover>td {
background-color:transparent !important
}
.el-table tbody .cell-grey:hover>td {
background-color:#d7d7d7 !important
}
</style>
